<template>
  <view style="width: 100%; min-height: 100vh;">
    <view style="width: 100%; padding-top: 66upx;">
      <view class="flex flex-direction align-center" style="width: 100%; padding: 0 80upx;">
        <view style="font-size: 40upx; font-weight: bold; margin-bottom: 92upx;">手机密码登录</view>
        <view style="width: 100%; margin-bottom: 80upx;">
          <view class="flex align-end" style="width: 100%; height: 118upx; padding-bottom: 20upx; border-bottom: 2upx solid #F5F5F5;">
            <input type="number" v-model="phonenum" placeholder="请输入手机号" maxlength="11" placeholder-style="color: #DCDCDC;" style="font-size: 28upx; width: 100%;">
          </view>
          <view class="flex align-end" style="width: 100%; height: 118upx; padding-bottom: 20upx; border-bottom: 2upx solid #F5F5F5;">
            <input type="password" v-model="password" placeholder="请输入密码" placeholder-style="color: #DCDCDC;" style="font-size: 28upx; width: 100%;">
          </view>
          <view v-if="test_password" style="font-size: 20upx; color: #E52718;">密码由数字和字母组成且不小于6位数</view>
        </view>
        <view @click="handleToLogin" class="flex align-center justify-center"
              style="width: 596upx; height: 80upx; margin-bottom: 30upx; background-color: #E52718; color: white; font-size: 28upx; border-radius: 40upx;">
          登录
        </view>
        <view @click="handleToChangePassword" style="font-size: 28upx; color: #666666;">忘记密码？</view>
      </view>
    </view>
  </view>
</template>
<script>
import {accountUser_loginPost} from "api/login/login"
import { setJYJPush, getRegistrationID } from "utils/jyJpush";
export default {
  data() {
    return {
      phonenum: '', //手机号
      password: '', //密码
      test_password: false, //校验密码
      registration_id: '', //设备号
    }
  },
  methods: {
    //登录
    handleToLogin(){
      const validateToast = (vm, rules) => {
        return new Promise((resolve, reject) => {
          Object.keys(rules).forEach((key) => {
            const segments = key.split('.')
            const item = rules[key]
            item.forEach((ruleItem) => {
              const value = segments.reduce((total, item) => total && total[item], vm)
              // 必填
              if (ruleItem.required && !value) {
                reject(ruleItem.message)
              }
              // 正则
              if (ruleItem.pattern && !ruleItem.pattern.test(value)) {
                reject(ruleItem.message)
              }
            })
          })
          resolve(true)
        })
      }
      const validate_val_obj = {
        phonenum: this.phonenum,
        password: this.password,
        registration_id: this.registration_id,
      }
      const rules = {
        phonenum: [
          {required: true, message: '请输入手机号'},
          { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误' } // 正则校验
        ],
        password: [
          {required: true, message: '请输入密码'},
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]/}
        ],
      }
      this.test_password = !(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test(this.password));
      if(this.test_password){
        return;
      }
      validateToast(validate_val_obj, rules).then(valid =>{
        accountUser_loginPost(validate_val_obj).then(res=>{
          uni.setStorageSync('user_info', res.data);
          uni.switchTab({
            url: '/pages/index/index'
          })
        }).catch(err=>{
          uni.showToast({
            title: err.msg,
            icon: 'none'
          })
        })
      }).catch(err=>{
        if(err){
          uni.showToast({
            icon: 'none',
            title: err,
          })
        }
      })
    },
    //去修改密码页
    handleToChangePassword(){
      this.password = '';
      this.$uniNavigateTo({
        url: '/pages/my/setUp/changePassword/changePassword',
        query:{
          type: 1
        }
      })
    }
  },
  async onLoad(){
    //极光推送
    await setJYJPush();
    this.registration_id = await getRegistrationID();
    let user_info = uni.getStorageSync('user_info');
    this.phonenum = user_info.phonenum;
  }
}
</script>
<style lang="less" scoped>
</style>
